<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <script src="./something.js"></script>
    <script src="./somethingExtend.js"></script>
    <script src="./likeJquery.js"></script>
    <script src="./scope2.js"></script>
    <script src="./scope1.js"></script>

    <style>
      div#transitionhovertree {
        /* float: right; */
        width: 10px;
        height: 10px;
        background: blue;
        /* position: absolute;
        transform: rotate(0deg);
        transform-origin: 0% 0%;
        transition: width 2s; */

        /* -webkit-transform: translateY(100px); */
        /* -moz-transition: width 2s;  */
        /* Firefox 4 */
        /* -webkit-transition: width 2s;  */
        /* Safari and Chrome */
        /* -o-transition: width 2s;  */
        /* Opera */
      }

      div#transitionhovertree:hover {
        /* width: 300px; */
        -webkit-transform: translateY(100px);
      }

      .active {
        -webkit-transform: translateY(100px);
      }

      div#div2 {
        background: red;
        height: auto;
      }

      .nowarp {
        white-space: pre-line;
      }

      html,
      body {
        height: 100%;
      }

      .horizontal-divide-line table tbody tr td:nth-child(2) {
        text-align: right;
      }
    </style>
  </head>
  <body onload="initPage()">
    <h1>测试兼容性</h1>
    <div>
      <div id="div2"></div>
      <button id="btn2">add dom</button>
    </div>

    <div id="div3">
      <p>this is div3</p>
    </div>
    <div>
      <button id="btn1">change width</button>
      <div id="div1" style="height:20px;background:red">sdfsafasdfasfdasdfasf</div>
    </div>
    <div>
      <button id="btn_add">add</button>
    </div>
    <div>
      <ul id="ul1">
        <li id="li1">111<b>aa</b></li>
        <li id="li2">222</li>
        <li id="li3">333</li>
        <li id="li4">444</li>
      </ul>
    </div>
    <form action="" id="f1">
      <input type="text" name="t1" />
      <input type="text" name="t2" />
      <input type="submit" value="submit" id="b1" />
      <div>
        <button name="b2">123</button>
      </div>
    </form>
    <div style="position: relative;">
      <div id="transitionhovertree" class="active" onclick="func1()"></div>
    </div>
    <div>
      <table>
        <thead>
          <tr>
            <td>
              qw
            </td>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>
              <input type="text" name="" id="" value="asdfadfa" />
            </td>
          </tr>
          <tr>
            <td class="form-label-box-123">123</td>
            <td>345</td>
          </tr>
          <tr>
            <td class="form-label-box">123</td>
            <td>345</td>
          </tr>
          <tr>
            <td class="form-label-box">123</td>
            <td>345</td>
          </tr>
          <tr>
            <td class="form-label-box">123</td>
            <td>345</td>
          </tr>
          <tr>
            <td class="form-label-box">123</td>
            <td>345</td>
          </tr>
        </tbody>
      </table>
    </div>
    <div>
      <tabel>
        <tr>
          <div colspan="4" class="horizontal-divide-line">
            <table width="100%" border="0" cellpadding="0" cellspacing="0">
              <tbody>
                <tr>
                  <td align="right" class="form-label-box" width="25%">Supplier Code:</td>
                  <td width="25%">ANSELLER</td>
                </tr>
                <tr>
                  <td align="right" class="form-label-box">Supplier Name:</td>
                  <td>ANSELLER</td>
                </tr>
                <tr>
                  <td align="right" class="form-label-box">Fee Override:</td>
                  <td>
                    YES
                  </td>
                </tr>
                <tr>
                  <td align="right" class="form-label-box">Product:</td>
                  <td id="arProfile.prodCode">
                    SIF
                  </td>
                  <td align="right" class="form-label-box">Product Name:</td>
                  <td>SIF</td>
                </tr>
              </tbody>
            </table>
          </div>
        </tr>
      </tabel>
    </div>
    <!-- 在 script 标签中添加的变量 , 是全局的变量,会在window中出现 -->
    <script>
      var W1 = 'W1';
    </script>

    <script>
      var W3 = 'W3';
    </script>

    <script>
      var W2 = 'W2';
      console.log(W1, W2, W3);
    </script>

    <script>
      function func1(e) {
        console.log(event);
      }
      var b1 = document.getElementById('b1');
      b1.addEventListener('click', function(e) {
        e.defaultPrevented();
        e.stopPropagation();
        console.log(e);
      });

      var btn1 = document.getElementById('btn1');
      var div1 = document.getElementById('div1');
      btn1.addEventListener('click', function() {
        div1.style.width = '100';
      });

      var div2 = document.getElementById('div2');
      var btn2 = document.getElementById('btn2');
      btn2.addEventListener('click', function() {
        setInnerText(div2, '1234<br/>56');
        console.log(div2.clientHeight);
      });

      function setInnerText(oElem, sText) {
        // var nds = oElem.childNodes;
        // for (var i = 0; i < nds.length; ++i) {
        //   if (nds[i].nodeType == 3) {
        //     // 3 for Text Node, 1 for Element Node
        //     nds[i].nodeValue = sText;
        //     return;
        //   }
        // }
        // oElem.appendChild(document.createTextNode(sText));
        oElem.innerHTML = sText;
      }
      var div3 = document.getElementById('div3');
      setInnerText(div3, '1234<br/>56');
      console.log(document.documentElement.scrollHeight);

      // 闭包的经典例子
      var add = function() {
        var counter = 0;
        return function() {
          return (counter += 1);
        };
      };
      var addTest = add();

      addTest();
      addTest();
      addTest();

      function getNextTdNode(className, styleName) {
        // var aDomLists = document.getElementsByClassName(className);
        var aDomLists = filterTd(className);
        for (var i = 0; i < aDomLists.length; i++) {
          var element = aDomLists[i];
          var nextElement = getNextNode(element.nextSibling);
          if (nextElement && nextElement.nodeType == 1) {
            // JSAF.addStyleClass(nextElement, styleName);
            nextElement.className = styleName;
          }
        }

        // function getNextNode(element) {
        //   if (element.nextSibling.nodeType != 1) {
        //     return element.nextSibling.nextSibling;
        //   } else {
        //     return element.nextSibling;
        //   }
        // }

        function getNextNode(element) {
          if (element && element.nodeType && element.nodeType != 1) {
            return getNextNode(element.nextSibling);
          } else {
            return element;
          }
        }

        function filterTd(className) {
          var arr = [];
          var tags = document.all ? document.all : document.getElementsByTagName('td');
          var reg = new RegExp('^(' + className + ')', 'g'); //构造函数方式
          // var reg = /^(className)/
          for (var i = 0; i < tags.length; i++) {
            var element = tags[i];
            reg.lastIndex = 0;
            reg.source;
            if (reg.test(element.className)) {
              arr.push(element);
            }
          }
          console.log(arr);
          return arr;
        }
      }

      function initPage() {
        getNextTdNode('form-label-box', 'textLeft');
      }
    </script>
  </body>
</html>
